<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品附件</title>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
    <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
</head>
<body>
<div class="layui-form-item" style="margin:30px 0 0 50px;">
    <div class="layui-inline" style="width: 100%;">
        <form  class="layui-form" action="">
            <div class="layui-input-inline" style="width:250px;">
                <input type="text" name="keyword" lay-verify="keyword" value="{if isset($wherelist['keyword'])}{$wherelist['keyword']}{/if}" autocomplete="off" placeholder="请输入ID、标题、描述等" class="layui-input layui-btn-sm">
            </div>
            <div class="layui-inline">
                <select name="supplier_id" id="" class="layui-select" lay-search="">
                    <option value="">请选择供应商</option>
                    {notempty name="$supplier_admins"}{volist name="supplier_admins" id="vo"}
                    <option value="{$vo.id}" {if isset($wherelist.supplier_id) && $vo.id==$wherelist.supplier_id}selected{/if}>{$vo.name}</option>
                    {/volist}{/notempty}
                </select>
            </div>

            <div class="layui-inline">
                <select name="category" id="" class="layui-select" lay-search="">
                    <option value="">请选择分类</option>
                    {notempty name="$category"}{volist name="$category" id="vo"}
                    <option value="{$vo}" {if isset($wherelist.category) && $vo==$wherelist.category}selected{/if}>{$key}</option>
                    {/volist}{/notempty}
                </select>
            </div>

            <a class="layui-btn layui-btn-danger layui-btn-sm search">{:Lang('搜索')}</a>
            <button type="reset" class="layui-btn layui-btn-normal layui-btn-sm">{:lang('重置')}</button>
            <a href="{:url('admin/travelguides/create_guide')}" class="layui-btn layui-btn-sm addSupplierProduct">
                {:Lang('新增')}
            </a>
        </form>
    </div>
</div>
<table class="layui-table" lay-filter="travelguides" id="list" lay-size="sm" lay-even="" lay-skin="line">

</table>
</body>
<script type="text/html" id="barTravelguides">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="__PUBLIC__/layui/layui.2.5.6.all.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script>
    layui.use(['layer','form','jquery'],function() {
        var layer = layui.layer,
            $ = layui.jquery,
            table = layui.table,
            form = layui.form;
        //第一个实例
        const TABLE_URL = '/admin/travelguides/tableData';
        var table_url = TABLE_URL;
        function renderTable(table_url){
            table.render({
                elem: '#list'
                // ,height: 'full-100'
                ,url: table_url //数据接口
                ,page: true //开启分页
                ,limit:15
                ,cellMinWidth:80
                ,cols: [[ //表头
                    {field: 'id', title: 'ID',width: 80,  sort: true, fixed: 'left'}
                    ,{field: 'title', title: '标题',width: 200,
                        templet:function (d) {
                            return '<p class="showContent">'+d.title+'</p>';
                        }}
                    // ,{field: 'description', title: '描述',width: 200,
                    //     templet:function (d) {
                    //         return '<p class="showContent">'+d.description+'</p>';
                    //     }}
                    ,{field: 'cover_img', width:150 ,title: '封面',
                        templet:function (d) {
                            return '<img class="openCoverImg" src="'+d.cover_img+'">';
                        }
                    }
                    ,{field: 'categoryName', title: '分类', width: 120}
                    ,{field: 'browse', title: '真实阅读量', width: 120, sort: true}
                    ,{field: 'create_time', title: '创建时间', width: 170, sort: true}
                    ,{field: 'update_time', title: '更新时间', width: 170, sort: true}
                    ,{field: 'supplier_name', title: '供应商账号', width: 170}
                    ,{field: 'sort_num', title: '排序', width: 80, sort: true}
                    ,{field: '', title: '操作', width: 130, toolbar: '#barTravelguides',fixed:'right'}
                ]]
            });
        }
        renderTable(table_url);
        $('.search').click(function () {
            var keyword = $('input[name=keyword]').val();
            var supplier_id = $('select[name=supplier_id]').val();
            var category = $('select[name=category]').val();
            var params = [];
            if(keyword!=='') params.push('keyword=' + keyword);
            if(supplier_id!=='') params.push('supplier_id=' + supplier_id);
            if(category!=='') params.push('category=' + category);

            table_url = params.length > 0 ?
                TABLE_URL + '?' + params.join('&') : TABLE_URL;
            renderTable(table_url);
        })
        $(document).on('mouseover','.showContent',function (data) {
            var text = $(this).html();
            var that = this;
            layer.tips('<p style="color:#999;">' + text + '</p>', that,{
                tips: [1,'#FFF'],
                time: 2000
            });
        })
        $(document).on('click','.openCoverImg',function (data) {
            var url = $(this).attr('src');
            layer.open({
                type:1,
                area:['600px'],
                content:'<img src="'+ url +'" width="100%">',
                end:function () {
                    
                }
            })
        })

        table.on('edit(travelguides)',function (obj) {
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            var load_index = layer.load(2);
            $.post('/admin/travelguides/update_guide_sort',{id:data.id,sort_num:value},function (res) {
                layer.close(load_index)
                layer.msg(res.msg);
            },'json')
        })

        //监听工具条
        table.on('tool(travelguides)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的删除吗？', function(index){
                    $.post('/admin/travelguides/delete_guide',{id:data.id},function (res) {
                        layer.msg(res.msg);
                        obj.del();
                        layer.close(index);
                    },'json')
                });
            } else if(obj.event === 'edit'){
                layer.open({
                    type:2,
                    title:'查看详情',
                    area: ['90%','90%'],
                    content:'/admin/travelguides/update_guide?id='+data.id,
                    end:function (res) {

                    }
                })
            }
        });

        $('.addSupplierProduct').click(function () {
            var url = $(this).attr('href');
            layer.open({
                type:2,
                content:url,
                area:['90%','90%'],
                title:'新增旅游攻略',
                end:function () {
                    window.location.reload();
                }
            })
            return false;
        })
    })

</script>
</html>